<template>
	<!-- 医师专家介绍 -->
	<view class="activity_container">
		<view class="top-img">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="brief">
			<view class="brief-top">
				孙老师中南海<text class="text">主任医师</text>
			</view>
			<view class="brief-bottom">
				擅长：按摩、正骨、腰椎间盘突出、按摩、正骨腰椎间盘突出
			</view>
		</view>
		<view class="items">
			<view class="items-top">
				<view class="items-top-left">
					服务项目
				</view>
				<view class="items-top-right">
					<view class="items-top-right-text">
						选择项目
					</view>
					<view class="items-top-right-img">
						<image src="../../static/联系客服_slices/更多.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="items-info">
				<view class="items-info-img">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="items-info-right">
					<view class="items-info-right-top">
						按摩 脊柱侧弯 正骨调理<text class="text">孙老师中南海</text>
					</view>
					<view class="items-info-right-center">
						服务时长：60分钟
					</view>
					<view class="items-info-bottom">
						<span class="_span">￥</span><span
							class="__span">598</span><span
							class="___span">¥7176</span>
					</view>
				</view>
			</view>
		</view>
		<view class="make">
			<view class="make-left">
				预约时间
			</view>
			<view class="make-right">
				<view class="make-right-time">
					05-24 09:20
				</view>
				<view class="make-right-img">
					<image src="../../static/联系客服_slices/更多.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="text-details">
			图文详情
		</view>
		<view class="line">
			
		</view>
		<view class="details-img">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="collect">
			<view class="collect-left">
				<image src="../../static/logo.png" mode=""></image>收藏
			</view>
			<view class="collect-right">
				立即预约
			</view>
		</view>
		<view class="bottmo">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
	};
</script>

<style lang="less" scoped>
	.activity_container {
		height: 100vh;
		.top-img{
			width: 750rpx;
			height: 624rpx;
			image{
				width: 750rpx;
				height: 624rpx;
			}
		}
		.brief{
			width: 750rpx;
			height: 176rpx;
			background: #FFFFFF;
			.brief-top{
				margin-left: 26rpx;
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #202022;
				line-height: 44rpx;
				text-align: left;
				padding-top: 20rpx;
				font-style: normal;
				margin-bottom: 16rpx;
				.text{
					width: 120rpx;
					height: 32rpx;
					background: #F5D19A;
					border-radius: 14rpx 0rpx 14rpx 0rpx;
					opacity: 0.15;
					font-size: 24rpx;
					padding:0 12rpx;
				}
			}
			.brief-bottom{
				padding-top: 8rpx;
				width: 692rpx;
				height: 80rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #939688;
				line-height: 46rpx;
				font-style: normal;
				margin-left: 26rpx;
			}
		}
		.items{
			width: 750rpx;
			height: 374rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			.items-top{
				display: flex;
				width: 698rpx;
				margin-left: 28rpx;
				border-bottom: 2rpx solid #EEEFF2;
				.items-top-left{
					margin-right: 152rpx;
					width: 200rpx;
					height: 116rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					line-height: 116rpx;
					text-align: left;
					font-style: normal;
				}
				.items-top-right{
					display: flex;
					.items-top-right-text{
						width: 322rpx;
						height: 116rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #989AA2;
						line-height: 116rpx;
						text-align: right;
						font-style: normal;
					}
					.items-top-right-img{
						width: 22rpx;
						height: 20rpx;
						margin-top: 50rpx;
						margin-left: 2rpx;
						image{
							width: 12rpx;
							height: 20rpx;
						}
					}
				}
			}
			.items-info{
				display: flex;
				width: 700rpx;
				height: 214rpx;
				background: linear-gradient( 112deg, #F6F7F5 0%, #FBFFF7 100%), #F6F6F6;
				border-radius: 20rpx;
				border: 1rpx solid #F2EEEE;
				.items-info-img{
					width: 172rpx;
					height: 171rpx;
					margin-top: 20rpx;
					margin-left: 20rpx;
					image{
						width: 172rpx;
						height: 171rpx;
					}
				}
				.items-info-right{
					.items-info-right-top{
						margin-top: 36rpx;
						margin-left: 18rpx;
						height: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 500;
						font-size: 28rpx;
						color: #202022;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						.text{
							color: #9F918B;
							width: 166rpx;
							height: 34rpx;
							background: linear-gradient( 270deg, rgba(255,255,255,0.33) 0%, #EAD4B1 100%);
							border-radius: 6rpx;
							font-size: 24rpx;
							margin-left: 14rpx;
							padding-left: 8rpx;
							
						}
					}
					.items-info-right-center{
						width: 180rpx;
						height: 22rpx;
						margin-left: 18rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						font-weight: 400;
						font-size: 22rpx;
						color: #989AA2;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						margin-top: 24rpx;
					}
					.items-info-bottom{
						margin-left: 18rpx;
						margin-top: 30rpx;
						._span {
							font-family: OPPOSans, OPPOSans;
							font-weight: normal;
							font-size: 24rpx;
							color: #C19C55;
							line-height: 38rpx;
							text-align: left;
							font-style: normal;
						}
						
						.__span {
							height: 62rpx;
							font-family: OPPOSans, OPPOSans;
							font-weight: normal;
							font-size: 40rpx;
							color: #C19C55;
							line-height: 62rpx;
							text-align: left;
							font-style: normal;
							font-weight: 600;
						}
						
						.___span {
							height: 24rpx;
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 400;
							font-size: 24rpx;
							color: #AAAAAA;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-decoration-line: line-through;
							margin-left: 20rpx;
							display: inline-block;
						}
					}
				}
			}
			
		}
		.make{
			display: flex;
			width: 750rpx;
			height: 118rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			justify-content: space-between;
			.make-left{
				width: 200rpx;
				height: 118rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				line-height: 118rpx;
				text-align: left;
				margin-left: 28rpx;
			}
			.make-right{
				display: flex;
				.make-right-time{
					width: 206rpx;
					height: 118rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #C19C55;
					line-height: 118rpx;
					text-align: right;
					font-style: normal;
				}
				.make-right-img{
					width: 12rpx;
					height: 20rpx;
					margin-top: 49rpx;
					margin-left: 4rpx;
					margin-right: 28rpx;
					image{
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}
		.text-details{
			width: 750rpx;
			height: 30rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 30rpx;
			color: #010101;
			line-height: 46rpx;
			text-align: center;
			font-style: normal;
		}
		.line{
			width: 40rpx;
			height: 6rpx;
			background: #202022;
			border-radius: 4rpx;
			border: 2rpx solid #202022;
			margin: 24rpx auto;
		}
		.details-img{
			width: 750rpx;
			height: 500rpx;
			image{
				width: 750rpx;
				height: 500rpx;
			}
		}
		.collect{
			margin-bottom: 60rpx;
			width: 750rpx;
			display: flex;
			.collect-left{
				width: 376rpx;
				height: 100rpx;
				background: rgba(163,178,111,0.59);
				opacity: 0.15;
				line-height: 100rpx;
				display: flex;
				font-size: 30rpx;
				color: #000;
				image{
					width: 48rpx;
					height: 47rpx;
					margin-top: 26rpx;
					margin-left: 118rpx;
					background: #272636;
					margin-right: 18rpx;
				}
			}
			.collect-right{
				width: 374rpx;
				height: 100rpx;
				background: #C19C55;
				line-height: 100rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
		.bottmo{
			height: 8rpx;
		}
	}
</style>